import React,{Component} from 'react'
import {
  View,
  Caption,
  Text,
  Divider,
  Tile,
  Image,
  Overlay,
  Icon,
  Title,
  TouchableOpacity
} from '@shoutem/ui'

import { Actions } from 'react-native-router-flux'
import FavoriteDetail from './FavoriteDetail'

// {uri, poster, username, desc, ctime, id}
const VideoPost = (data) => {
  const post = data.hasOwnProperty('time') ? data.post : data
  let {uri, poster, username, desc, ctime} = post
  if (post.hasOwnProperty('time')) {
    uri = post.video_src
  }
  return (
    <Divider styleName="section-header" >
      <Tile>
        <View styleName="content">
          <View styleName="horizontal space-between">
            <Caption>{username}</Caption>
            <Caption>{ctime}</Caption>
          </View>
        </View>
        <View styleName="content">
          <Title>{desc}</Title>
        </View>
        <TouchableOpacity onPress={() => (
          data.hasOwnProperty('time') ?
          ( data.level==='favorite' ?
              Actions.favoriteVideoDetail({data: post, hideBottom:true})
            : Actions.likeVideoDetail({data: post, hideBottom:true})
          )
          : Actions.videoDetail({data: post, hideBottom:false})
        )}>
          <Image
            styleName="featured"
            source={{ uri:poster }}
          >
            <Overlay styleName="rounded-small">
              <Icon name="play" />
            </Overlay>
          </Image>
        </TouchableOpacity>
        {data.hasOwnProperty('time') ? <FavoriteDetail {...data}/> : null}
      </Tile>
    </Divider>
  )
}

export default VideoPost
